<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      function reactive(data) {
        return new Proxy(data, {
          get(target, key) {
            return target[key]
          },
          set(target, key, value) {
            target[key] = value
            effect()
            return true
          },
        })
      }
      const obj = reactive({ name: '小胖', age: 30 })

      function effect() {
        app.innerHTML = obj.name
      }
      effect()

      setTimeout(() => {
        obj.name = '小小胖'
      }, 2000)
    </script>
  </body>
</html>
